<template>
  <div class="step-container">
    <CostStep1 v-if="tabsActive == 2" :formData="formData" :bussType="bussType"/>
    <CostStep2 v-if="tabsActive == 3" :bussType="bussType" :applyId="applyId" @loading="handleLoading"/>
  </div>
</template>

<script>
import CostStep1 from '@/views/process/components/steps/cost/CostStep1.vue';
import CostStep2 from '@/views/process/components/steps/Step2.vue';


export default {
  props: {
    bussType: {
      type: String
    },
    applyId: {
      type: String
    },
    formData: {
      type: Object
    }
  },
  name: "CostSteps",
  components: {CostStep2, CostStep1},
  data() {
    return {
    }
  },
  computed: {
    tabsActive() {
      return this.$store.state.tabs.tabsActive;
    },
  },
  methods:{
    handleLoading(status) {
      this.$emit('loading', status);
    }
  }
}
</script>

<style lang="scss" scoped>
.step-container {
  width: 100%;
  padding: 20px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
